<template>
	<view class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"
	data-scroll="1">
		<view class="mui-slider" data-slider="2" style="transform: translate3d(0px, 0px, 0px) translateZ(0px);">
			<view class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
				<text :class="['mui-control-item', index == 0 ? 'mui-active' : '']" @click="setActive(0)">
					直属用户
				</text>
				<text :class="['mui-control-item', index == 1 ? 'mui-active' : '']" @click="setActive(1)">
					分裂用户
				</text>
			</view>
			<view class="mui-slider-progress-bar mui-col-xs-6" :style="index==0?'transform: translate3d(0px, 0px, 0px) translateZ(0px);':'transform: translate3d(215px, 0px, 0px) translateZ(0px);'"></view>

			<view class="mui-slider-group" :style="index==0?'transform: translate3d(0px, 0px, 0px) translateZ(0px);':'transform: translate3d(-'+screenWidth+'px, 0px, 0px) translateZ(0px); transition-duration: 0ms;'">
			<!-- <view class="mui-slider-group" style="transform: translate3d(0px, 0px, 0px) translateZ(0px);"> -->
				<view class="mui-slider-item mui-control-content">
					<view v-for="(item, idx) in team" :key="idx" class="list-item">
						<view class="list-item-left">
							<view class="list-item-left-img"><image :src="item.avatar"></image></view>
							<view class="list-item-left-txt">
								<view>{{item.nickname}}</view>
								<view>uid：{{item.id}}</view>
								<view class="clear-float"></view>
							</view>
						</view>
						<view  class="list-item-right">
							<text @click="todayInfo(item)">今日做单信息</text>
						</view>
					</view>
				</view>

				<view class="mui-slider-item mui-control-content mui-active">
					<view class="list-item" v-for="(item, idx) in team2" :key="idx">
						<view class="list-item-left">
							<view class="list-item-left-img"><image :src="item.avatar"></image></view>
							<view class="list-item-left-txt">
								<view>{{item.nickname}}</view>
								<view>uid：{{item.id}}</view>
								<view class="clear-float"></view>
							</view>
						</view>
						<view  class="list-item-right">
							<text @click="todayInfo(item)">今日做单信息</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

	<view class="mui-popup mui-popup-in" v-if="active">
			<view class="mui-popup-inner">
				<view class="mui-popup-title">
					今日下级用户做单统计
				</view>
				<view class="mui-popup-text">
					今日提交单量：
					<text>{{currentData?.counts_all_tady_task_count}}</text>
				</view>
				<view class="mui-popup-text">
					今日审核通过单量:
					<text>{{currentData?.counts_tady_task_count}}</text>
				</view>
			</view>
			<view class="mui-popup-buttons">
				<text class="mui-popup-button mui-popup-button-bold" @click="close">
					取消
				</text>
			</view>
		</view>
		<view class="mui-popup-backdrop mui-active" v-if="active"></view>
</template>

<script setup>
	import { ref,reactive } from "vue";
	import { getAllTeam } from '@/api/member.js';
	const team = reactive({});
	const team2 = reactive({});
	const index = ref(0);
	const active = ref(false);

	const currentData = reactive({
		counts_all_tady_task_count: 0,
		counts_tady_task_count: 0
	});

	//获取当前屏幕宽度
    const screenWidth = uni.getSystemInfoSync().windowWidth;
	const setActive = (ind)=>{
		index.value =ind;
	}
	
	const getTeam = async() =>{
		uni.showLoading();
		await getAllTeam().then(res=>{
			console.log(res);
			if (res.team && typeof res.team === 'object') {
				Object.assign(team, res.team);
			}
			if (res.team2 && typeof res.team2 === 'object') {
				Object.assign(team2, res.team2);
			}
		}).finally(()=>{
			uni.hideLoading();
		})
	}
	
	getTeam();
	const todayInfo = (item) =>{
		 Object.assign(currentData, item);
		active.value = true;
	}

	const close = () =>{
		active.value = false;
	}
</script>

<style scoped>
	.mui-slider-indicator.mui-segmented-control {
	    position: relative;
	    bottom: auto;
	}
	.mui-segmented-control.mui-segmented-control-inverted {
	    width: 100%;
	    border: 0;
	    border-radius: 0;
	}
	.mui-segmented-control.mui-scroll-wrapper {
	    height: 38px;
	}
	.mui-slider-indicator {
	    position: absolute;
	    bottom: 8px;
	    width: 100%;
	    text-align: center;
	    background: none;
	}
	.mui-segmented-control {
	    font-size: 15px;
	    font-weight: 400;
	    position: relative;
	    display: table;
	    overflow: hidden;
	    width: 100%;
	    table-layout: fixed;
	    border: 1px solid #007aff;
	    border-radius: 3px;
	    background-color: transparent;

	}
	.mui-scroll-wrapper {
	    position: absolute;
	    z-index: 2;
	    top: 0;
	    bottom: 0;
	    left: 0;
	    overflow: hidden;
	    width: 100%;
	}
	.mui-slider {
	    position: relative;
	    z-index: 1;
	    overflow: hidden;
	    width: 100%;
	}
	.mui-slider-indicator.mui-segmented-control {
	    position: relative;
	    bottom: auto;
	}
	.mui-segmented-control.mui-segmented-control-inverted {
	    width: 100%;
	    border: 0;
	    border-radius: 0;
	}
	.mui-slider-indicator {
	    position: absolute;
	    bottom: 8px;
	    width: 100%;
	    text-align: center;
	    background: none;
	}
	.mui-segmented-control {
	    font-size: 15px;
	    font-weight: 400;
	    position: relative;
	    display: table;
	    overflow: hidden;
	    width: 100%;
	    table-layout: fixed;
	    border: 1px solid #007aff;
	    border-radius: 3px;
	    background-color: transparent;
	}
	.mui-segmented-control.mui-segmented-control-inverted .mui-control-item {
	    color: inherit;
	    border: 0;
	}
	.mui-segmented-control .mui-control-item:first-child {
	    border-left-width: 0;
	}
	.mui-segmented-control.mui-scroll-wrapper .mui-control-item {
	    display: inline-block;
	    width: auto;
	    padding: 0 20px;
	    border: 0;
	}
	.mui-segmented-control .mui-control-item {
	    line-height: 38px;
	    display: table-cell;
	    overflow: hidden;
	    width: 1%;

	    transition: background-color .1s linear;
	    text-align: center;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	    color: #007aff;
	    border-color: #007aff;
	    border-left: 1px solid #007aff;
	}
	.mui-segmented-control.mui-segmented-control-inverted ~ .mui-slider-progress-bar {
	    background-color: #007aff;
	}


	.mui-slider-progress-bar {
	    z-index: 1;
	    height: 2px;

	    transform: translateZ(0);
	}
	.mui-col-xs-6 {
	    width: 50%;
	}
	.mui-slider .mui-slider-group {
	    font-size: 0;
	    position: relative;
	    transition: all 0s linear;
	    transition: all 0s linear;
	    white-space: nowrap;
	}
	.mui-slider .mui-segmented-control.mui-segmented-control-inverted ~ .mui-slider-group .mui-slider-item {
	    border-top: 1px solid #c8c7cc;
	    border-bottom: 1px solid #c8c7cc;
	}
	.mui-slider .mui-slider-group .mui-slider-item {
	    font-size: 14px;
	    position: relative;
	    display: inline-block;
	    width: 100%;
	    height: 100%;
	    vertical-align: top;
	    white-space: normal;
	}
	.mui-slider-indicator {
	    position: absolute;
	    bottom: 8px;
	    width: 100%;
	    text-align: center;
	    background: none;
	}
	.mui-segmented-control {
	    font-size: 15px;
	    font-weight: 400;
	    position: relative;
	    display: table;
	    overflow: hidden;
	    width: 100%;
	    table-layout: fixed;
	    border: 1px solid #007aff;
	    border-radius: 3px;
	    background-color: transparent;
	    touch-callout: none;
	}
	.list-item{
		display: flex;
		margin: 5rpx 10rpx;
		border-bottom: 1rpx solid #c8c7cc;
		padding: 20rpx 15rpx;
	}
	.list-item:last-child{
		border-bottom:none;
	}
	.list-item-left,.list-item-right{
		flex: 1;
		overflow: hidden;
	}
	.list-item-right {
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
	}

	.list-item-left-img{
		float: left;
		margin-right: 30rpx;
	}
	.list-item-left-img image{
		max-width: 80rpx;
		max-height: 80rpx;
	}
	.list-item-left-txt{
		float: left;
		text-align: left;

	}
	.clear-float{
		clear: both;
	}
	.list-item-right text{
		color: #fff;
		border: 1px solid #f0ad4e;
		background-color: #f0ad4e;
		padding: 10rpx 5rpx;
		font-weight: 500;
	}
	.mui-slider .mui-slider-indicator .mui-active{
		color: #007aff;
	}

	.mui-popup.mui-popup-in {
	    display: block;
	    -webkit-transition-duration: 400ms;
	    transition-duration: 400ms;
	    -webkit-transform: translate3d(-50%, -50%, 0) scale(1);
	    transform: translate3d(-50%, -50%, 0) scale(1);
	    opacity: 1;
	}
	.mui-popup {
	    position: fixed;
	    z-index: 10000;
	    top: 50%;
	    left: 50%;
	    display: none;
	    overflow: hidden;
	    width: 270px;
	    -webkit-transition-property: -webkit-transform, opacity;
	    transition-property: transform, opacity;
	    -webkit-transform: translate3d(-50%, -50%, 0) scale(1.185);
	    transform: translate3d(-50%, -50%, 0) scale(1.185);
	    text-align: center;
	    opacity: 0;
	    color: #000;
	    border-radius: 13px;
	}

	.mui-popup-inner {
	    position: relative;
	    padding: 15px;
	    border-radius: 13px 13px 0 0;
	    background: rgba(255, 255, 255, .95);
	}
	.mui-popup-title {
	    font-size: 16px;
	    font-weight: 500;
	    color: #333;
	    text-align: center;
	}
	.mui-popup-title + .mui-popup-text {
	    font-family: inherit;
	    font-size: 13px;
	    color: #666;
	    margin: 10px 0 0;
	}
	.mui-popup-input input {
	    font-size: 14px;
	    width: 100%;
	    height: 35px;
	    margin: 5px 0 0;
	    padding: 0 5px;
	    border: 0;
	    border-bottom: 1px solid #666;
	    border-radius: 0;
	    background: #fff;
	}

	.mui-popup-buttons {
	    position: relative;
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: flex;
	    height: 44px;
	    box-pack: center;
	    justify-content: center;
	}
	.mui-popup-button:first-child {
	    /* border-radius: 0 0 0 13px; */
	    color: #39b54a;
	}
	.mui-popup-button {
	    font-size: 14px;
	    line-height: 44px;
	    position: relative;
	    display: block;
	    overflow: hidden;
	    box-sizing: border-box;
	    width: 100%;
	    height: 44px;
	    padding: 0 5px;
	    cursor: pointer;
	    text-align: center;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	    color: #007aff;
	    background: #fff;
	    -webkit-box-flex: 1;
	}
	.mui-popup-button.mui-popup-button-bold {
	    font-weight: 500;
	}
	.mui-popup-button:last-child {
	    /* border-radius: 0 0 13px 0; */
	}
	.mui-popup-backdrop.mui-active {
	    opacity: 1;
	}
	.mui-popup-backdrop {
	    position: fixed;
	    z-index: 998;
	    top: 0;
	    right: 0;
	    bottom: 0;
	    left: 0;
	    -webkit-transition-duration: 400ms;
	    transition-duration: 400ms;
	    opacity: 0;
	    background: rgba(0, 0, 0, .4);
	}

</style>
